<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<style>
		.pop_box{
			width: :100vw;
			height: 100vh;
			background-color: rgba(000,000,000,0.5);
			position: absolute;
			top:0;
			left:0;
			display: flew;
			align-items: center;
			justify-content: center;
		}
		.content_box{
			width: 30%;
			height: 30%;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 10px 12px 24px;
			max-width: 400px;
			min-width: 300px;
		}
		.tip_info{
			width: 100%;
			box-sizing: border-box;
			padding: 0px 30px;
			text-align: center;
		}
		button{
			font-size: 18px;
			padding: 4px 16px;
			border-radius: 4px;
			border: none;
			color: #ffffff;
		}
		button:not(:first-child){
			margin-left: 20px;
		}
		.but_ok{
			background-color: darkblue;
		}
		.but_warn{
			background-color: darkorange;
		}
		.but_not{
			background-color: darkcyan;
		}
	</style>
	<body>
		<div id="app">
			<table border ="1" style="text-align: center;">
				<tr>
					<td>序号</td>
					<td>商品名称</td>
					<td>单价</td>
					<td>数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="(val,index) in goods" :key="index">
					<td>{{index+1}}</td>					
					<td>{{val.title}}</td>
					<td>{{val.price}}</td>
					<td>{{val.chooseNum}}</td>
					<td>{{val.allPrice}}</td>
					<td>
					    <button @[but.eventname]="handleClick(but.type)" :class="but.className" v-for="but in val.optConfig">{{but.text}}</button>
					</td>
				</tr>
			</table>
	         <pop-center v-if="isShow" v-model="isShow" :pop-config="popConfig" @but-click="butClick"></pop-center>
		</div>
	</body>
</html>
<script>
	const app = Vue.createApp({
		data(){
			const optConfig=[
							{
								text:'减少',
								className:{'but_warn':true},
								eventname:'click',
								type:1
							},
							{
								text:'增加',
								className:{'but_ok':true},
								eventname:'click',
								type:2
							},
							{
								text:'删除',
								className:{'but_not':true},
								eventname:'dblclick',
								type:3
							},
							{
								text:'修改',
								className:{'but_warn':true},
								eventname:'click',
								type:4
							}
						]
			return{
				goods:[
					{
						title:'星巴克',
						price:30,
						chooseNum:0,
						allPrice:0,
						optConfig
					},
					
					{
						title:'茶百道',
						price:30,
						chooseNum:0,
						allPrice:0,
						optConfig
					},
					
					{
						title:'蜜雪冰城',
						price:30,
						chooseNum:0,
						allPrice:0,
						optConfig
					}
				],
				popConfig:{
					text:'你确定要执行当前操作吗？',
					buts:[
						{
							text:'确认',
							className:{'but_ok':true},
							eventmname:'click',
							type:'ok'
						},
						{
							text:'取消',
							className:{'but_warn':true},
							eventname:'click',
							type:'cancel'
						}
					]
				},
				//控住弹窗是否显示
				isShow:true,
				//保持当前操作的类型
				optType:undefined
			}
		},
		methods:{
			handleClick(type){
				this.optType = type
				switch(type){
					case 1:
					    break;
				    case 2:
				        break;
					case 3:
					    this.isShow = true;
						this.popConfig.text = '你确定要删除此项吗？删除后无法恢复！'
					    break;
				    case 4:
					    this.isShow = true;
						this.popConfig.text = '你确定要修改此项吗？'
				        break;
					default:
					    break;
				}
			},
			butClick(type){
				this.isShow = false
				if(type == 'ok'){
					switch (this.optType){
						case 1:
						    break;
						case 2:
						    break;
						case 3:
						    console.log('执行删除操作')
							 break;
						case 4:
						    console.log('执行修改操作')
							 break;
						default:
						    break;
					}
				}
				
			}
		}
	})
	app.component('pop-center',{
		props:['popConfig','modelValue'],
		methods:{
			handleClick(type){
				this.$emit('butClick',type)
			}
		},
		template:
		`
		   <div class="pop_box">
		     <div class="content_box">
		         <div class="close_but" @click="$emit('update:modelValue',false)">X</div>
			     <div class="tip_info">{{popConfig.text}}</div>
				 <div class="but_box">
				     <button @[but.eventname]="handleClick(but.type)" :class="but.className" v-for="but in val.optConfig.buts">{{but.text}}</button>
				 </div>
		     </div>
		   </div>
		`
	})
	const vm = app.mount("#app")
</script>